<template>
  <div>
    <p>firstName: {{data.firstName}}</p>
    <p>lastName: {{data.lastName}}</p>
    <p>fullName: {{data.fullName}}</p>
  </div>
</template>

<script>
import { computed, reactive } from 'vue';

export default {
  setup () {
    const data = reactive({
      firstName: '吕',
      lastName: '布',
    })
    // computed 的返回值就是一个响应式的 ref 对象，意味着用的时候，要加 .value
    /* const fullName = computed(() => {
      return data.firstName + '~' + data.lastName
    })
    console.log(fullName.value) */

    // fullName 只要添加到了 data 里面，也是响应式的
    data.fullName = computed(() => {
      // 返回啥，得到的数据就是啥
      return data.firstName + '~' + data.lastName
    })

    // 如果把 computed 计算出来的 fullName 直接添加进了 reactive 对象，JS 中取值的时候，可以直接去，无需 .value
    console.log(data.fullName)

    return {
      data
    }
  }
}
</script>

<style lang="scss" scoped>

</style>